<template>
	<!-- 这是图表模板 -->
	<view style="width: 100%; height: 100%;">
		<template v-if="option && !lazyLoad">
			<mpvue-echarts :canvasId="canvasId" :lazyLoad="lazyLoad" :ref="canvasId" @onInit="initChart" />
		</template>
		<template v-else>
			<view tyle="width: 100%; height: 100%;">
				<view v-for="(item, index) in iconType" :key="index"><icon :type="iconType[index]" size="26" /></view> 加载中
			</view>
		</template>
	</view>
</template>

<script>
import * as echarts from '@/static/echarts@4.2.1.js'; /*chart.min.js为在线定制  不放 static APP H5 端惠报错 */
import mpvueEcharts from '@/mpvue-echarts/src/echarts.vue';
import echartsConfig from '@/mpvue-echarts/src/echarts-config.js';
export default {
	props: {
		option: {
			default: false
		},
		canvasId: {
			type: String,
			default: 'ec-canvas'
		},
		lazyLoad: {
			type: Boolean,
			default: false
		},
		disableTouch: {
			type: Boolean,
			default: false
		},
		throttleTouch: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			iconType: ['loading']
		};
	},

	created() {
		// #ifdef APP-PLUS|| MP-WEIXIN
		this.iconType = ['success', 'success_no_circle', 'info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear'];
		// #endif
		// #ifdef MP-ALIPAY
		this.iconType = ['info', 'warn', 'waiting', 'cancel', 'download', 'search', 'clear', 'success', 'success_no_circle', 'loading'];
		// #endif
		// #ifdef MP-BAIDU
		this.iconType = [
			'success',
			'info',
			'warn',
			'waiting',
			'success_no_circle',
			'clear',
			'search',
			'personal',
			'setting',
			'top',
			'close',
			'cancel',
			'download',
			'checkboxSelected',
			'radioSelected',
			'radioUnselect'
		];
		// #endif
	},

	components: {
		mpvueEcharts
	},
	methods: {
		initChart(e) {
			if (!this.option) return console.log('请传入 option: {}');
			console.log('echarts.registerTheme', echarts.registerTheme);
			let { canvas, width, height } = e;
			
			echarts.registerTheme('echartsConfig',echartsConfig )  //注册主题
			
			echarts.setCanvasCreator(() => canvas);
			
			const chart = echarts.init(canvas, "echartsConfig", {
				width: width,
				height: height
			});
			
			canvas.setChart(chart);
			chart.setOption(this.option);
			this.$refs[this.canvasId].setChart(chart);
		}
	}
};
</script>
